//引入Vue
import Vue from "vue";
//引入Vuex
import Vuex from "vuex"
//引入axios
import axios from "axios"
//使用Vuex
Vue.use(Vuex)

const state = {
  count: 0,
  movieList: []
}

//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
const mutations = {
  addIncrement(state) {
    state.count++
  },
  addNincrement(state, n) {
    //在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
    state.count += n
  },
  setMovieList(state, movieList) {
    state.movieList = movieList
  }
  //Mutation 必须是同步函数
  // addWaitincrement(state) {
  //    //异步的累加
  //   setTimeout(() => {
  //     state.count++
  //   }, 1000)
  // }
  /* 
  现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
  */
}
/*
actions 类似于 mutation，不同在于：
actions 提交的是 mutation，而不是直接变更状态。
actions 可以包含任意异步操作。 
 */
const actions = {
  //因为actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
  async getMovieList({ commit }) {
    //我们不要在action中操作数据
    //当异步完成以后,把数据交给mutation去操作数据
    const result = await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")
    commit("setMovieList", result.data.data.list)
    console.log(result.data.data.list);
  }
}

const getters = {
  //Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  //Getter 接受 state 作为其第一个参数
  myMovieList(state) {
    return state.movieList.filter(item => {
      return item.albumName.length < 7 && item.albumName.length > 3
    })
  },

  yourMovieList(state) {
    //注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
    return ({ start, over }) => {
      return state.movieList.filter(item => {
        return item.albumName.length <= over && item.albumName.length >= start
      })
    }
  }
}

//暴露store配置项
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
